<template>
  <el-card>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card>已就业人数:
            <el-tag type="success">{{ stuEmpTotal }}</el-tag>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>未就业人数:
            <el-tag type="danger">{{ stuEmpUnTotal }}</el-tag>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>毕业人数:
            <el-tag type="warning">{{ stuTotal }}</el-tag>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-card>
            <div id="bar" style="width: auto;height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div id="line" style="width: auto;height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-card>
            <div id="pie" style="width: auto;height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div id="line1" style="width: auto;height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-card>

</template>

<script>
import {
  getStudentEmpTotal, getStudentEmpUnTotal,
  getFinishCollegeStuTotal, getStuEmpCityTotal,
  getSpeciAvgMoney, getSpeciStuEmpCount
} from '@/api/studentemployment/studentemployment'

export default {
  data() {
    return {
      stuEmpTotal: 0,  //已就业人数
      stuEmpUnTotal: 0,  //未就业人数
      stuTotal: 0  //毕业人数
    }
  },
  mounted() {
    this.showBar()
    this.showLine()
    this.showPie()
    this.showLine1()
    this.getStudentTotal()
    this.getStudentUnTotal()
    this.getStuTotal()
  },
  methods: {
    //统计毕业人数
    getStuTotal() {
      getFinishCollegeStuTotal().then(res => {
        this.stuTotal = res.data
      })
    },
    //统计已就业人数
    getStudentTotal() {
      getStudentEmpTotal().then(res => {
        this.stuEmpTotal = res.data
      })
    },
    //统计未就业人数
    getStudentUnTotal() {
      getStudentEmpUnTotal().then(res => {
        this.stuEmpUnTotal = res.data
      })
    },

    showLine1() {
      let myecharts = this.$echarts.init(document.getElementById('line1'))
      myecharts.setOption({
        title: {
          text: '不同专业薪资涨幅'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['第一年', '第二年', '第三年', '第四年', '第五年']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [2500, 4500, 5000, 9000, 10000],
            type: 'line'

          },
          {
            data: [3500, 5500, 6000, 10000, 12000],
            type: 'line'

          }
        ]
      })
    },
    showPie() {
      let myecharts = this.$echarts.init(document.getElementById('pie'));
      getSpeciStuEmpCount().then(res=>{
        let array=res.data;
        myecharts.setOption({
          title: {
            text: '不同专业就业人数'
          },
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              type: 'pie',
              radius: [25, 175],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: array
            }
          ]
        })
      })

    },
    showLine() {
      let myecharts = this.$echarts.init(document.getElementById('line'))
      getSpeciAvgMoney().then(res => {
        let array = res.data
        let spnames = []//专业名称
        let avgMoney = []//存储专业的平均薪资
        for (let i in array) {
          spnames.push(array[i].spname)
          avgMoney.push(array[i].money)
        }
        myecharts.setOption({
          title: {
            text: '不同专业就业平均薪资'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: spnames
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: avgMoney,
              type: 'line',
              areaStyle: {}
            }
          ]
        })
      })

    },
    showBar() {
      let myecharts = this.$echarts.init(document.getElementById('bar'))
      getStuEmpCityTotal().then(res => {

        let array = res.data
        let cityNames = []//存储城市名称
        let stuCount = []//存储的就业人数
        for (let i in array) {
          cityNames.push(array[i].cityname)
          stuCount.push(array[i].totalCity)
        }
        myecharts.setOption({
          title: {
            text: '各个城市就业人数'
          },
          tooltip: {},
          legend: {
            data: ['城市名称']
          },
          xAxis: {
            data: cityNames
          },
          yAxis: {},
          series: [
            {
              name: '就业人数',
              type: 'bar',
              data: stuCount
            }
          ]
        })
      })

    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 3px;
}
</style>
